WordPress es arrastrar y soltar, PERO... Aquí te explico por qué todavía toco HTML

¿Alguna vez te has preguntado cómo funcionan realmente los sitios web?

Puede parecer magia, pero hay un lenguaje detrás de cada página web que ves. Ese lenguaje se llama HTML.

Piensa en el HTML como los bloques de construcción básicos de Internet.

Incluso un poco de conocimiento de HTML puede mejorar realmente tu juego con WordPress. He visto de primera mano cómo ayuda a las personas a hacer que sus sitios web de WordPress sean aún mejores.

En esta publicación, explicaré qué es el HTML, por qué es importante y cómo puedes agregar código HTML personalizado a tu sitio de WordPress.

¡Te sorprenderá lo fácil y útil que puede ser para un diseño web efectivo!

Tabla de Contenidos

¿Qué es el HTML?

HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Básicamente, el HTML es el lenguaje que estructura el contenido web. Piensa en él como el esqueleto de una página web.

El HTML utiliza algo llamado "etiquetas". Las etiquetas le dicen al navegador web qué parte es cada contenido.

Por ejemplo, las etiquetas pueden decirle al navegador que algo es un encabezado, un párrafo o una imagen. Los navegadores leen estas etiquetas para mostrar las páginas web como deben verse.

El HTML no es un lenguaje de programación. Es más bien una forma de organizar la información para que los navegadores puedan entenderla.

¿Por qué deberías preocuparte por el HTML en WordPress?

WordPress es súper fácil de usar. Puedes crear un sitio web completo sin saber nada de código. Entonces, ¿por qué molestarse con el HTML?

Bueno, el HTML te da más control sobre tu contenido. A veces, el editor normal de WordPress simplemente no es suficiente.

Digamos que quieres añadir un atributo específico a una imagen. O tal vez quieres crear un estilo de lista realmente único. El HTML te permite hacer cosas así.

El HTML también es un salvavidas para la resolución de problemas.

¿Alguna vez has tenido un problema de formato extraño en WordPress? Mirar el HTML puede ayudarte a encontrar y solucionar el problema rápidamente. Es mucho más rápido que adivinar con el editor visual.

Además, el HTML te da flexibilidad. ¿Quieres añadir algunas personalizaciones avanzadas? ¿Como clases personalizadas para estilizar o diseños más complejos? El HTML desbloquea esas posibilidades.

Y aquí viene una importante: la preparación para el futuro.

WordPress está en constante cambio. ¿Pero el HTML? Es una habilidad web fundamental que siempre será útil.

Lo he visto una y otra vez: entender HTML te hace mucho más adaptable en el mundo web.

HTML 101: Lo básico

Hablemos de los bloques de construcción del HTML. Se llaman etiquetas.

Las etiquetas son instrucciones que le dicen al navegador qué hacer con tu contenido. La mayoría de las etiquetas vienen en pares: una etiqueta de apertura y una etiqueta de cierre.

Por ejemplo, si quieres crear un párrafo, usas la etiqueta <p> para empezar y </p> para terminar.

¿Ves la barra en la etiqueta de cierre? Así es como sabes que es el final.

Veamos algunas etiquetas HTML comunes que usarás mucho:

Los encabezados son para títulos y subtítulos. Tienes <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.

<h1> es el encabezado más importante (normalmente el título principal), y <h6> es el menos importante.

Los enlaces son lo que hacen que la web sea, bueno, ¡una red! La etiqueta <a> crea enlaces. <a> significa 'anchor' (ancla).

¿Quieres mostrar imágenes? La etiqueta <img> es tu amiga. <img> es la abreviatura de 'image' (imagen).

¿Necesitas hacer una lista de cosas? HTML te cubre. Hay dos tipos principales:

• <ul> para listas desordenadas (viñetas). 'ul' significa 'unordered list' (lista desordenada).
• <ol> para listas ordenadas (listas numeradas). 'ol' significa 'ordered list' (lista ordenada).

Y dentro de <ul> y <ol>, usas etiquetas <li> para cada elemento de la lista. 'li' significa 'list item' (elemento de lista).

Las etiquetas también pueden tener atributos. Los atributos proporcionan información adicional sobre una etiqueta.

Por ejemplo, la etiqueta <a> necesita un atributo href para decirle a dónde enlazar. Así: <a href="https://example.com">Texto del enlace</a>. El atributo href contiene la dirección del sitio web.

Y la etiqueta <img> necesita un atributo src para decirle dónde encontrar el archivo de imagen. También debería tener un atributo alt para 'texto alternativo', que es importante si la imagen no se puede cargar o por accesibilidad.

Así: <img src="imagen.jpg" alt="Texto descriptivo">.

Aquí tienes un ejemplo súper simple de HTML en acción:

<h1>Welcome to My Blog</h1>

<p>This is my first paragraph of content. It's going to be awesome!</p>

<a href="https://duplicator.com">Check out Duplicator!</a>

Ese código crearía un encabezado principal, un párrafo y un enlace en una página web.

Cuando empecé a aprender HTML, estas etiquetas básicas fueron mi punto de partida. ¿Y sinceramente? Siguen siendo la base de casi todo lo que hago en línea. ¡Estas etiquetas simples son poderosas!

Poniendo el HTML a trabajar: Ejemplos prácticos

Entonces, ¿cómo puedes usar realmente HTML en WordPress? Veamos algunos ejemplos.

¿Quieres poner algún texto en negrita o cursiva? HTML puede hacerlo.

Usa las etiquetas <strong> y </strong> para poner texto en negrita. O usa las etiquetas <b> y </b>, que también ponen texto en negrita.

Así: <strong>Este texto está en negrita</strong>.

Para cursiva, usa <em> o <i>. Así: <em>Este texto está en cursiva</em>.

Estas etiquetas te ayudan a enfatizar palabras y frases en tu contenido.

Hablamos de la etiqueta <a>. Puedes usarla para enlazar a otras páginas de tu sitio o a otros sitios web.

Puedes enlazar texto, imágenes o incluso botones. Todo consiste en usar esa etiqueta <a> con el atributo href correcto.

¿Quieres añadir un vídeo de YouTube o Vimeo a tu sitio de WordPress? La mayoría de las plataformas de vídeo te dan códigos para incrustar. Estos códigos suelen ser HTML, a menudo usando etiquetas <iframe>.

Simplemente copia el código para incrustar de YouTube (o de donde sea que esté alojado tu vídeo) y pégalo en WordPress. WordPress sabe qué hacer con él.

¿Necesitas una lista con viñetas? Usa etiquetas <ul>. Para una lista numerada, usa etiquetas <ol> y <li>.

¿Quieres añadir una línea para separar secciones de tu contenido? La etiqueta <hr> crea una línea horizontal. Es una forma sencilla de dividir visualmente tu texto.

Estos son solo algunos ejemplos, pero puedes ver lo útil que puede ser realmente el HTML en WordPress. Se trata de añadir un poco de estructura y funcionalidad extra al contenido de tu sitio web.

Cómo aprender HTML para WordPress

Entonces, estás pensando: "Vale, el HTML suena útil, pero ¿cómo lo aprendo?" ¡Buena pregunta! Por suerte, hay muchísimos recursos geniales disponibles.

Aquí tienes algunos lugares donde puedes empezar a aprender HTML ahora mismo.

MDN Web Docs es como la enciclopedia del desarrollo web. Está hecha por Mozilla (la gente detrás de Firefox) y es súper completa y fiable.

Si te gusta el aprendizaje interactivo, Codecademy es genial. Tienen cursos en los que realmente escribes código en tu navegador.

W3schools es un sitio web popular para tutoriales de desarrollo web. Tienen muchísimos ejemplos y referencias de HTML.

¿Quieres ver cómo se usa el HTML específicamente en WordPress? Consulta la documentación oficial para desarrolladores de WordPress. Es un poco más técnica, pero es un gran recurso a medida que te sientas más cómodo.

No importa qué recurso elijas, lo más importante es la práctica. En serio. No aprenderás HTML solo leyéndolo. Tienes que escribir código y ver qué pasa.

¡Experimenta! No tengas miedo de romper cosas. Así es como se aprende.

Cómo usar HTML en WordPress

Hay un montón de maneras de usar HTML en WordPress. Vamos a repasarlas una por una.

1. Añadir un bloque HTML personalizado en el editor de bloques

Si estás usando el Editor de Bloques (Gutenberg) en WordPress, puedes usar un bloque especial solo para HTML. Se llama el bloque HTML Personalizado.

Para usarlo, simplemente añade un nuevo bloque a tu página o entrada de WordPress. Busca "HTML" en la barra de búsqueda de bloques. Verás que aparece el bloque HTML Personalizado.

Haz clic en él para añadirlo a tu contenido. Es como añadir cualquier otro bloque. Incluso puedes arrastrarlo y soltarlo donde quieras que vaya.

Una vez que agregues el bloque, verás un cuadro donde puedes escribir o pegar tu código HTML de WordPress. Simplemente pon tu HTML ahí mismo.

Haz clic en Vista previa para ver cómo se ve tu código HTML en la página sin publicarlo realmente.

Esto es realmente útil para comprobar tu código.

2. Editar un bloque en HTML

¿Sabías que puedes editar cualquier bloque de WordPress como HTML? Sí, incluso esos bloques de párrafo normales.

Esto es útil si quieres hacer pequeños ajustes de HTML a un bloque que ya está ahí.

Primero, haz clic en el bloque que quieres editar. Luego, busca los tres puntos en la barra de herramientas del bloque. Haz clic ahí.

Aparecerá un menú. En ese menú, pulsa el botón Editar como HTML.

De repente, ¡el bloque se transformará! En lugar del editor visual habitual, verás el código HTML personalizado para ese bloque. Ahora puedes editar el HTML directamente.

Esto es genial para pequeños retoques. Quizás quieras añadir una clase específica a un párrafo para darle estilo más tarde. O quizás necesites corregir un pequeño problema de formato que es más fácil de manejar en HTML.

Una vez que hayas terminado de editar el HTML, puedes hacer clic en Editar visualmente en la barra de herramientas del bloque para volver a la vista normal del editor visual.

3. Usar el editor de código en Gutenberg

Para aquellos que se sienten cómodos con el código, el editor de bloques de WordPress tiene una vista completa de Editor de Código. Esto te muestra el código HTML de toda tu entrada o página.

Para cambiar al Editor de Código, mira en la parte superior derecha de la pantalla de tu editor de Gutenberg. Verás tres puntos ahí también – el menú de opciones principal para todo el editor. Haz clic en esos puntos.

En ese menú, verás una opción llamada Editor de código. Haz clic en ella.

Verás las etiquetas y la estructura de toda tu página presentadas en código.

Este editor HTML de WordPress es realmente para usuarios avanzados que prefieren trabajar directamente en código. Si te gusta programar y quieres ver la estructura HTML general de tu página, el Editor de Código es para ti.

¡Pero ten cuidado! Si cometes errores en el HTML, podrías estropear el diseño de tu página. Es importante entender HTML si vas a usar el Editor de Código de forma extensiva.

Si quieres volver al editor visual normal, simplemente vuelve a ese menú superior derecho y haz clic en Editor visual.

4. Añadir HTML con el editor clásico

El Editor Clásico de WordPress tiene dos pestañas: Visual y Texto. La pestaña Texto es donde puedes acceder al código.

Cuando haces clic en Texto, verás todo el código HTML de tu entrada. Aquí es donde puedes escribir o pegar código HTML directamente.

Después de haber añadido o editado tu HTML, puedes volver a la pestaña Visual para ver cómo se ve. Te mostrará la versión renderizada de tu HTML.

5. Usar un plugin de fragmentos de código de WordPress

A veces quieres añadir pequeños fragmentos de HTML, CSS o JavaScript a tu sitio de WordPress. Quizás quieras añadir algún código de seguimiento personalizado, o un estilo especial para una parte determinada de tu sitio.

Podrías editar los archivos de tu tema para hacer esto, pero puede ser arriesgado. Y si tu tema se actualiza, tus cambios podrían ser sobrescritos.

Ahí es donde entran los plugins de fragmentos de código. Estos plugins te permiten añadir fragmentos de código directamente a través de tu panel de WordPress.

Mantienen tu código organizado y separado de los archivos de tu tema. Esto es mucho más seguro y fácil de gestionar, especialmente si no eres un experto en código.

Antes de añadir cualquier fragmento de código, ¡siempre es una buena idea hacer una copia de seguridad de tu sitio web! Si algo sale mal con tu código, querrás poder restaurar tu sitio fácilmente.

Duplicator es un plugin que facilita enormemente la creación de copias de seguridad completas de tu sitio de WordPress. Siempre recomiendo hacer una copia de seguridad antes de realizar cambios en el código.

Mi plugin de fragmentos de código favorito es WPCode (anteriormente "Insert Headers and Footers"). Esta herramienta te permite añadir HTML, CSS y JavaScript a tu sitio web.

Además, hay un montón de fragmentos predefinidos para que los uses si no estás acostumbrado a programar.

Usar un plugin de fragmentos de código es mucho más seguro que editar directamente los archivos del tema. También es más fácil hacer un seguimiento de tu código personalizado.

6. Añadir HTML en los widgets de WordPress

WordPress viene con un widget integrado llamado para HTML personalizado. Para encontrarlo, ve a tu panel de WordPress y haz clic en Apariencia y luego en Widgets.

Verás diferentes áreas de widgets, como Barra lateral o Pie de página. Estas dependen de tu tema de WordPress.

Añade el widget de HTML personalizado al área de widgets donde quieras añadir tu HTML.

Escribe o pega tu HTML directamente en ese cuadro.

Puedes añadir todo tipo de cosas con HTML en los widgets. Texto personalizado, imágenes, enlaces, ¡incluso códigos de inserción, todo funciona!

Después de haber añadido tu HTML, haz clic en el botón Actualizar en la configuración del widget.

¡Eso es todo! Tu HTML ahora estará activo en esa área de widgets en tu sitio web.

7. Editar HTML en temas de WordPress

De hecho, puedes ir directamente a los archivos de tu tema de WordPress y editar el HTML allí. Esto te da mucho control sobre la estructura de tu sitio, pero también conlleva grandes riesgos.

Editar los archivos del tema directamente puede romper tu sitio web si no tienes cuidado. Un pequeño error en el código puede causar problemas importantes.

Si vas a editar los archivos del tema, te recomiendo usar siempre un tema hijo. Un tema hijo es como una copia segura de tu tema principal donde puedes hacer cambios de forma segura. De esta manera, si tu tema principal se actualiza, tus cambios no se sobrescribirán.

De acuerdo, dejando las advertencias a un lado, aquí te explico cómo puedes editar los archivos del tema. En tu panel de WordPress, ve a Apariencia y luego a Editor de archivos de tema (a veces llamado simplemente Editor de temas).

En el lado derecho, verás una lista de los archivos de tu tema. Estos archivos controlan la estructura y el diseño de tu sitio web.

Algunos archivos comunes que contienen HTML son:

• header.php: Este archivo suele controlar la parte superior de tu sitio web, el área de la cabecera.
• footer.php: Este archivo controla la parte inferior, el área del pie de página.
• sidebar.php: Si tu tema tiene una barra lateral, este archivo la controla.
• index.php: Esta suele ser la página principal de tu sitio web, que muestra tus entradas de blog.
• single.php: Esto controla cómo se muestran las entradas de blog individuales.
• page.php: Esto controla cómo se muestran las páginas normales (como "Acerca de nosotros" o "Contacto").
• Archivos de plantilla: Tu tema podría tener otros archivos de plantilla para diferentes tipos de páginas.

Puedes editar el HTML directamente en el Editor de Archivos del Tema. Simplemente haz clic en un archivo para abrirlo, busca el HTML que deseas cambiar y realiza tus ediciones. Luego haz clic en Actualizar Archivo para guardar tus cambios.

Recuerda: Solo edita los archivos del tema si realmente sabes lo que estás haciendo, y usa siempre un tema hijo y ten una copia de seguridad.

En mi experiencia, solo edito archivos de tema para personalizaciones muy específicas que no se pueden hacer de otras maneras. E incluso entonces, soy súper cauteloso. Los temas hijos y las copias de seguridad de Duplicator siempre son parte de mi flujo de trabajo cuando toco archivos de tema.

8. Usar FTP para editar HTML de WordPress

FTP significa Protocolo de Transferencia de Archivos. Te da el acceso más directo para editar los archivos de tu tema de WordPress (y otros archivos también).

Para usar FTP, necesitarás algunas cosas:

• Un Cliente FTP: Es un software que te permite conectarte a tu servidor. Los clientes FTP populares son FileZilla, Cyberduck y Transmit.
• Credenciales FTP: Las obtendrás de tu proveedor de alojamiento web. Normalmente incluyen tu host FTP, nombre de usuario, contraseña y número de puerto.

Si no puedes encontrar tus credenciales FTP, revisa la configuración de tu cuenta de alojamiento o contacta con el soporte.

Una vez que tengas esto, abre tu cliente FTP e introduce tus credenciales FTP para conectarte a tu servidor.

Después de conectarte, verás una vista con dos lados. Un lado muestra los archivos de tu ordenador y el otro lado muestra los archivos de tu servidor web.

Navega a los archivos de tu tema de WordPress en el lado del servidor. La ruta suele ser algo como /wp-content/themes/tu-nombre-de-tema/.

Una vez que tengas una copia de seguridad y estés en tu carpeta de tema a través de FTP, puedes descargar los archivos HTML del tema a tu ordenador o editarlos directamente.

Simplemente haz clic derecho en el archivo en tu cliente FTP y elige Descargar o Ver/Editar.

Ahora, edita el archivo descargado en tu ordenador usando un editor de código. Buenos editores de código para esto son VS Code, Sublime Text, Atom o Notepad++.

Abre el archivo en tu editor de código y haz tus cambios de HTML.

Una vez que hayas terminado de añadir HTML, guarda el archivo. Haz clic derecho en el archivo en tu cliente FTP y elige Subir. Esto sobrescribirá el archivo original en tu servidor con tu versión editada.

FTP es una herramienta potente, pero requiere ciertos conocimientos técnicos. Y es importante ser responsable al usarla. Siempre revisa tus cambios antes de subirlos, y ten siempre una copia de seguridad lista.

Preguntas Frecuentes (FAQs)

Reflexiones finales

Aprender incluso un poco de HTML puede abrirle un nuevo mundo de posibilidades con WordPress. Le da más control, más flexibilidad y una comprensión más profunda de cómo funcionan realmente los sitios web.

No tenga miedo de seguir aprendiendo y experimentando. Cuanto más juegue con el código, más cómodo se sentirá.

¡Explore esos recursos que mencioné, pruebe las diferentes formas de añadir HTML en WordPress y vea lo que puede crear!

Y recuerde, ¡siempre haga una copia de seguridad de su sitio antes de hacer grandes cambios! Herramientas como Duplicator facilitan las copias de seguridad y pueden ahorrarle muchos dolores de cabeza en el futuro.

Ya que está aquí, creo que le gustarán estas otras guías de WordPress:

• Olvida lo que sabes sobre los editores de código de WordPress – Prueba esto en su lugar
• Las 15 mejores herramientas sin código para WordPress
• Codifique de forma más inteligente, no más difícil: herramientas para desarrolladores de WordPress para cada profesional
• Cómo usar la CLI de WordPress: Domina la línea de comandos
• ¿Cuánto se tarda en aprender WordPress?